<template>
  <div class="home-content-wrapper">
    <!-- banner -->
    <div class="home-banner" :class="{'home-banner-h5': piniaSystem.getIsH5}">
      <z-swiper
        :list="banner"
        :skeletonNumber="1"
        :spaceBetween="10"
        :slidesPerView="1"
        :playTime="30"
        :autoHeight="true"
        type="banner"
        @slide-click="bannerClick"
      ></z-swiper>
    </div>

    <!-- activity -->
    <div class="home-section home-activity">
      <z-swiper
        :list="activity"
        :skeletonNumber="3"
        :spaceBetween="20"
        :slidesPerView="3"
        :playTime="30"
        type="activity"
        @slide-click="activeClick"
      ></z-swiper>
    </div>

    <!-- category -->
    <div class="home-section game-category">
      <h1 class="home-section__title">{{ t("home.category") }}</h1>
      <z-swiper
        :list="gameCategory"
        :skeletonNumber="5"
        :spaceBetween="20"
        :slidesPerView="piniaSystem.getIsH5 ? 3 : 5"
        :playTime="30"
        type="gameCategory"
        @slide-click="categoryClick"
      ></z-swiper>
    </div>

    <!-- recommend -->
    <div class="home-section recommend-category">
      <h1 class="home-section__title"><span class="green">{{t("home.NewGames")}}</span> {{t("home.Game")}}</h1>
      <z-swiper
        :list="recommend"
        :skeletonNumber="6"
        :spaceBetween="piniaSystem.getIsH5 ? 0 : 20"
        :slidesPerView="piniaSystem.getIsH5 ? 3 : 5"
        :playTime="3000"
        :rows="piniaSystem.getIsH5 ? 2 : 1"
        type="recommend"
        :class="piniaSystem.getIsH5? 'h5swiper' : ''"
        @slide-click="gotoPlay"
      ></z-swiper>
    </div>

    <!-- popular -->
    <div class="home-section popular-category">
      <h1 class="home-section__title"><span class="orange">{{ t('home.WinGames') }}</span> {{ t("home.Game")}}</h1>
      <z-swiper
        :list="popular"
        :skeletonNumber="6"
        :spaceBetween="piniaSystem.getIsH5 ? 0 : 20"
        :slidesPerView="piniaSystem.getIsH5 ? 3 : 5"
        :playTime="3000"
        :rows="piniaSystem.getIsH5 ? 2 : 1"
        type="recommend"
        :class="piniaSystem.getIsH5? 'h5swiper' : ''"
        @slide-click="gotoPlay"
      ></z-swiper>
    </div>

    <!-- jackpot -->
    <div class="home-section jackpot" v-if="!piniaSystem.getIsH5 && piniaUserinfo.getHaslogged">
      <div class="jackpot-content">
        <div class="jackpot-content-title">
          <img :src="images.ranklt">
          <img :src="images.jackpot">
          <span>$ {{ jackpot.money }}</span>
        </div>
        <img :src="images.pcr" v-if="isDark">
        <img :src="images.pcrlight" v-else>
        <div class="jackpot-wrapper">
          <div class="jackpot-ranking ranking1">
            <div class="jackpot-ranking-box">
              <img :src="getHeadPic(getRanks(1).avatar)" alt="" class="raning-pic">
              <p><img class="jprank" :src="images.rankNum2" alt=""></p>
              <h3>{{ handleHideName(getRanks(1).userName || '') }}</h3>
              <h4>
                <img :src="piniaUserinfo.getCurrentWallet.currencyIcon" alt="">
                <span> {{ getRanks(1).winMoney || 0 }}</span>
              </h4>
            </div>
          </div>
          <div class="jackpot-ranking ranking0">
            <div class="jackpot-ranking-box">
              <img :src="getHeadPic(getRanks(0).avatar)" alt="" class="raning-pic">
              <p><img class="jprank" :src="images.rankNum1" alt=""></p>
              <h3>{{ handleHideName(getRanks(0).userName || '') }}</h3>
              <h4>
                <img :src="piniaUserinfo.getCurrentWallet.currencyIcon" alt="">
                <span> {{ getRanks(0).winMoney || 0 }}</span>
              </h4>
            </div>
          </div>
          <div class="jackpot-ranking ranking2">
            <div class="jackpot-ranking-box">
              <img :src="getHeadPic(getRanks(2).avatar)" alt="" class="raning-pic">
              <p><img class="jprank" :src="images.rankNum3" alt=""></p>
              <h3>{{ handleHideName(getRanks(2).userName || '') }}</h3>
              <h4>
                <img :src="piniaUserinfo.getCurrentWallet.currencyIcon" alt="">
                <span> {{ getRanks(2).winMoney || 0 }}</span>
              </h4>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- jackpot -->
    <div class="home-section jackpot-h5" v-if="piniaSystem.getIsH5 && piniaUserinfo.getHaslogged">
      <h1>$ {{ jackpot.money }}</h1>
      <ul>
        <li class="jackpot-rank1">
          <img :src="getHeadPic(getRanks(1).avatar)" alt="" class="raning-pic">
              <p><img class="jprank" :src="images.rankNum2" alt=""></p>
          <h3>{{ handleHideName(getRanks(1).userName || '') }}</h3>
          <h4>
            <img :src="piniaUserinfo.getCurrentWallet.currencyIcon" alt="">
            <span> {{ getRanks(1).winMoney || 0 }}</span>
          </h4>
        </li>
        <li class="jackpot-rank0">
          <img :src="getHeadPic(getRanks(0).avatar)" alt="" class="raning-pic">
              <p><img class="jprank" :src="images.rankNum1" alt=""></p>
          <h3>{{ handleHideName(getRanks(0).userName || '') }}</h3>
          <h4>
            <img :src="piniaUserinfo.getCurrentWallet.currencyIcon" alt="">
            <span> {{ getRanks(0).winMoney || 0 }}</span>
          </h4>
        </li>
        <li class="jackpot-rank2">
          <img :src="getHeadPic(getRanks(2).avatar)" alt="" class="raning-pic">
              <p><img class="jprank" :src="images.rankNum3" alt=""></p>
          <h3>{{ handleHideName(getRanks(2).userName || '') }}</h3>
          <h4>
            <img :src="piniaUserinfo.getCurrentWallet.currencyIcon" alt="">
            <span> {{ getRanks(2).winMoney || 0 }}</span>
          </h4>
        </li>
      </ul>
    </div>

    <!-- vip club -->
    <ul class="home-section vipclub" v-if="!piniaSystem.getIsH5">
      <li @click="gotoVip(1)">
        <img class="home-vip-bg" :src="images.pcvip3"/>
        <img class="home-vip-logo" :src="images.pcvipicon3"/>
        <div class="home-vip-info">
          <div class="home-vip__title">{{ t('newVip.des1') }}</div>
          <div class="home-vip__desc">{{ t("newVip.text28") }}</div>
        </div>
      </li>
      <li @click="gotoVip(2)">
        <img class="home-vip-bg" :src="images.pcvip1"/>
        <img class="home-vip-logo" :src="images.pcvipicon1"/>
        <div class="home-vip-info">
          <div class="home-vip__title">{{ t('newVip.des2') }}</div>
          <div class="home-vip__desc">{{ t("newVip.des4") }}</div>
        </div>
      </li>
      <li @click="gotoVip(3)">
        <img class="home-vip-bg" :src="images.pcvip2"/>
        <img class="home-vip-logo vip-logo-3" :src="images.pcvipicon2"/>
        <div class="home-vip-info">
          <div class="home-vip__title">{{ t('newVip.des3') }}</div>
          <div class="home-vip__desc">{{ t("newVip.des5") }}</div>
        </div>
      </li>
    </ul>

    <!-- vip club -->
    <ul class="home-section vipclub-h5" v-else>
      <p>
        <img :src="images.hvip1" v-if="isDark" alt="">
        <img :src="images.hvip1light" v-else alt="">
        <h2>
          {{ t("newVip.text26") }}
          <span>{{ t("newVip.text27") }}</span>
        </h2>
        <h3>
          <div class="home-vip__title">{{ t('newVip.des1') }} <span>{{ t("newVip.text28") }}</span></div>
          <span class="view" @click="gotoVip(0)">{{t('home.details')}}</span>
        </h3>
      </p>
      <li @click="gotoVip(0)">
        <img class="home-vip-bg" :src="images.hvip2"/>
        <h4>
          {{t('newVip.des2')}}
          <span>{{ t("newVip.des4") }}</span>
        </h4>
        <span class="view">{{t('home.details')}}</span>
      </li>
      <li @click="gotoVip(0)">
        <img class="home-vip-logo" :src="images.hvip3"/>
        <h4>
          {{t('newVip.des3')}}
          <span>{{ t("newVip.des5") }}</span>
        </h4>
        <span class="view">{{t('home.details')}}</span>
      </li>
    </ul>

    <!-- contact us -->
    <div class="home-section contactus" v-if="!piniaSystem.getIsH5">
      <img :src="images.pcjoin" alt="">
      <div class="contactus-wrap">
        <h1>{{ t('home.text21') }}</h1>
        <h2><em>{{ t('home.text22') }}</em> <span v-html="t('home.text27').replace('#', `<span>${bottomConfig.channelName}</span>`)"></span></h2>
        <p>{{ t('home.text23') }}</p>
        <div class="contactus-button" @click="openEmail(bottomConfig)">{{bottomConfig.content}}</div>
      </div>
    </div>

    <!-- contact us -->
    <div class="home-section contactus-h5" v-else>
      <div class="contactus-wrap">
        <h1>{{ t('home.text21') }}</h1>
        <h2><em>{{ t('home.text22') }}</em> <span v-html="t('home.text27').replace('#', `<span>${bottomConfig.channelName}</span>`)"></span></h2>
        <p>{{ t('home.text23') }}</p>
        <div class="contactus-button" @click="openEmail(bottomConfig)">{{bottomConfig.content}}</div>
      </div>
      <img :src="images.pcjoin" alt="">
    </div>

  </div>

  <div class="add-app-to-desk">
    <span @click="dialogAddToDesk.show = true">{{t('addApp.addApp_01')}}</span>
  </div>

  <Footer />

  <!--
    <div class="text-center text-md">
      <div v-for="i in 10" :key="i" style="width: 100%; height: 500px">
        <img v-zlazy="`https://picsum.photos/${Math.floor(Math.random()*300)+200}/${Math.floor(Math.random()*300)+300}?id=${i}`" style="display: block" alt="" />
      </div>
    </div>
  -->
  <Dialog
    v-model:visible="dialogConfig.show"
    v-model:title="dialogConfig.title"
    :width="dialogConfig.width"
    v-model:autoHeight="dialogConfig.autoHeight"
    v-model:hiddenTitle="dialogConfig.hiddenTitle"
    :headerFixed="dialogConfig.headerFixed"
  >
    <template #headerLeftButton>
      <ZTab
        v-model:navs="lotteryNav"
        v-model:active="lotteryActive"
        layout="left"
        type="linker"
        v-if="dialogConfig.type === 'LotteryBoxPc'"
        @change="handleLotteryType"
      />
    </template>
    <template #headerRightButton>
      <div @click.stop="openLotteryRecord" v-if="dialogConfig.type === 'LotteryBoxPc'">{{ t('lotteryRecord.text31') }}</div>
      <div @click.stop="openSignRules" v-if="dialogConfig.type === 'DailyAttendance'">{{ t('signIn.text5') }}</div>
    </template>
    <!-- 会员返水 -->
    <MemberRebate v-if="dialogConfig.type === 'rebatePc'"/>
    <MemberRebateH5 v-else-if="dialogConfig.type === 'rebateH5'" v-model:title="dialogConfig.title" @back="back"/>

    <!-- 邀请好友 -->
    <InviteFriends v-else-if="dialogConfig.type === 'friendsH5'" v-model:title="dialogConfig.title" @back="back"/>

    <!-- 救济金 -->
    <RescueFundsPc v-else-if="dialogConfig.type === 'RescueFundsPc'" v-model:title="dialogConfig.title" @back="back"/>
    <RescueFunds v-else-if="dialogConfig.type === 'RescueFundsH5'" v-model:title="dialogConfig.title" @back="back"/>

    <!-- 签到 PC H5通用-->
    <DailyAttendance ref="dailyAttendanceRef" v-else-if="dialogConfig.type === 'DailyAttendance'" v-model:title="dialogConfig.title" @back="back"/>

    <!-- 抽奖 -->
    <LotteryBoxPc v-else-if="dialogConfig.type === 'LotteryBoxPc'" @query-navs="queryLotterynavs"/>
    <LotteryBoxH5 v-else-if="dialogConfig.type === 'LotteryBoxh5'" @query-navs="queryLotterynavs" v-model:title="dialogConfig.title" @back="back"/>

    <LotteryRecordPc v-else-if="dialogConfig.type === 'LotteryRecordPc'" @query-navs="queryLotterynavs"/>
  </Dialog>


  <van-popup
    v-model:show="dialogAddToDesk.show"
    position="bottom"
    closeable
    :style="{ height: '65%' }"
  >
    <div class="add-to-desk-popup">
      <h1>{{t('addApp.addApp_01')}}<img v-zlazy="images.add_01"></h1>
      <h2>{{ t("addApp.addApp_03") }}<img v-zlazy="images.add_02"></h2>
      <h2>{{ t("addApp.addApp_04") }}<img v-zlazy="images.add_03"></h2>
      <ul>
        <li>{{t("addApp.addApp_05")}}<img v-zlazy="images.add_04"></li>
        <li>{{t("addApp.addApp_06")}}<img v-zlazy="images.add_05"></li>
        <li>{{t("addApp.addApp_07")}}<img v-zlazy="images.add_06"></li>
        <li>{{t("addApp.addApp_08")}}<img v-zlazy="images.add_07"></li>
        <li>{{t("addApp.addApp_09")}}<img v-zlazy="images.add_08"></li>
      </ul>
    </div>
  </van-popup>

  <TipsRecharge v-model:visible="showTipsRecharge"/>
</template>

<script setup lang="ts">
import homeApi from '@/api/modules/home';
import system from '@/store/system';
import gamesList from '@/store/games';
import nocache from '@/store/nocache';
import userinfo from '@/store/userinfo';
import initChatRobot from '@/utils/chat';
import halllink from '@/store/halllink';
import { isDark } from '@/utils/dark';
import { handleHideName, loadVoLteResourceList } from '@/utils/format';

const router = useRouter();
const route = useRoute();
const piniaNocache:any = nocache();
const piniaSystem:any = system(); // 系统设置
const piniaGamesList:any = gamesList();
const piniaHalllink:any = halllink();
const piniaUserinfo:any = userinfo();
const currentWallet: any = computed(()=> piniaUserinfo.getCurrentWallet);
// 创建Socket链接
const global:any = getCurrentInstance()?.appContext.config.globalProperties;
const { t } = useI18n();

// 计算属性
const getHeadPic = (pic: any) => {
  return new URL(`../../assets/images/mine/${pic || '01'}.png`, import.meta.url).href;
}

const images: any = reactive({
  ranklt: new URL(`../../assets/images/home/jackpot/ranklt.svg`, import.meta.url).href,
  jackpot: new URL(`../../assets/images/home/jackpot/jackpot.svg`, import.meta.url).href,
  pcr: new URL(`../../assets/images/home/jackpot/pcr.png`, import.meta.url).href,
  pcrlight: new URL(`../../assets/images/home/jackpot/pcr-light.png`, import.meta.url).href,
  rankNum2: new URL(`../../assets/images/home/jackpot/rankNum2.png`, import.meta.url).href,
  rankNum1: new URL(`../../assets/images/home/jackpot/rankNum1.png`, import.meta.url).href,
  rankNum3: new URL(`../../assets/images/home/jackpot/rankNum3.png`, import.meta.url).href,
  pcvip1: new URL(`../../assets/images/home/vip/pcvip1.svg`, import.meta.url).href,
  pcvip2: new URL(`../../assets/images/home/vip/pcvip2.svg`, import.meta.url).href,
  pcvip3: new URL(`../../assets/images/home/vip/pcvip3.svg`, import.meta.url).href,
  pcvipicon1: new URL(`../../assets/images/home/vip/pcvipicon1.svg`, import.meta.url).href,
  pcvipicon2: new URL(`../../assets/images/home/vip/pcvipicon2.svg`, import.meta.url).href,
  pcvipicon3: new URL(`../../assets/images/home/vip/pcvipicon3.svg`, import.meta.url).href,
  hvip1: new URL(`../../assets/images/home/vip/hvip1.svg`, import.meta.url).href,
  hvip1light: new URL(`../../assets/images/home/vip/hvip1-light.png`, import.meta.url).href,
  hvip2: new URL(`../../assets/images/home/vip/hvip2.svg`, import.meta.url).href,
  hvip3: new URL(`../../assets/images/home/vip/hvip3.svg`, import.meta.url).href,
  pcjoin: new URL(`../../assets/images/home/contact/pcjoin.svg`, import.meta.url).href,
  add_01: new URL(`../../assets/images/home/addToDesk/add_01.svg`, import.meta.url).href,
  add_02: new URL(`../../assets/images/home/addToDesk/add_02.svg`, import.meta.url).href,
  add_03: new URL(`../../assets/images/home/addToDesk/add_03.svg`, import.meta.url).href,
  add_04: new URL(`../../assets/images/home/addToDesk/add_04.svg`, import.meta.url).href,
  add_05: new URL(`../../assets/images/home/addToDesk/add_05.svg`, import.meta.url).href,
  add_06: new URL(`../../assets/images/home/addToDesk/add_06.svg`, import.meta.url).href,
  add_07: new URL(`../../assets/images/home/addToDesk/add_07.svg`, import.meta.url).href,
  add_08: new URL(`../../assets/images/home/addToDesk/add_08.svg`, import.meta.url).href,
});

watch(
  () => piniaSystem.getLang,
  (val, preVal) => {
    changeLang();
  },
  { immediate: false, deep: true },
);

// 监听登录，如果登录后获取一些信息，比如排名等等
watch(
  () => piniaUserinfo.getHaslogged,
  (val, preVal) => {
    if(val){
      nextTick(()=>{
        getJackpotList();
      })
    }
  },
  { immediate: true, deep: true },
);


const data:any = reactive({
  banner: [],
  lotteryNav: [],
  lotteryActive: 0,
  activity: [
    {
      resource: new URL(`../../assets/images/home/activity/pcdailytask.svg`, import.meta.url).href,
      title: computed(()=>t('menuActive.task')),
      desc: computed(()=>t('pcActivityDesc.text1')),
      detail: computed(()=>t('Activity.details')),
      active: 'DailyTasks',
    },
    {
      resource: new URL(`../../assets/images/home/activity/pczp.svg`, import.meta.url).href,
      title: computed(()=>t('menuActive.turntable')),
      desc: computed(()=>t('pcActivityDesc.text4')),
      detail: computed(()=>t('Activity.details')),
      active: 'LotteryBox',
    },
    {
      resource: new URL(`../../assets/images/home/activity/pcfriends.svg`, import.meta.url).href,
      title: computed(()=>t('inviteFriend.inviteFriend')),
      desc: computed(()=>t('pcActivityDesc.text2')),
      detail: computed(()=>t('Activity.details')),
      active: 'Friend',
    },
    {
      resource: new URL(`../../assets/images/home/activity/pcrebate.svg`, import.meta.url).href,
      title: computed(()=>t('menuActive.rebate')),
      desc: computed(()=>t('pcActivityDesc.text3')),
      detail: computed(()=>t('Activity.details')),
      active: 'Rebate',
    },
    {
      resource: new URL(`../../assets/images/home/activity/pccheck.svg`, import.meta.url).href,
      title: computed(()=>t('signIn.checkBook')),
      desc: computed(()=>t('pcActivityDesc.text6')),
      detail: computed(()=>t('Activity.details')),
      active: 'DailyAttendance',
    },
    {
      resource: new URL(`../../assets/images/home/activity/pcjjj.svg`, import.meta.url).href,
      title: computed(()=>t('RescueFund.RescueFund')),
      desc: computed(()=>t('pcActivityDesc.text5')),
      detail: computed(()=>t('Activity.details')),
      active: 'RescueFunds',
    }
  ],
  gameCategory: [
    {
      resource: new URL(`../../assets/images/home/gameCategory/pcorigins.svg`, import.meta.url).href,
      name: computed(()=>t("home.Originals")),
      active: 'originalGame'
    },
    {
      resource: new URL(`../../assets/images/home/gameCategory/pcslots.svg`, import.meta.url).href,
      name: computed(()=>t("home.Slots")),
      active: 'slotGame'
    },
    {
      resource: new URL(`../../assets/images/home/gameCategory/pcdesks.svg`, import.meta.url).href,
      name: computed(()=>t("home.title4")),
      active: 'deskGame'
    },
    {
      resource: new URL(`../../assets/images/home/gameCategory/pclives.svg`, import.meta.url).href,
      name: computed(()=>t("home.title5")),
      active: 'liveGame'
    },
    {
      resource: new URL(`../../assets/images/home/gameCategory/pcsports.svg`, import.meta.url).href,
      name: computed(()=>t("home.title6")),
      active: 'sportBTI'
    },
  ],
  recommend: [],
  popular: [],
  dialogConfig: {
    show: false,
    type: '',
    title: "",
    headerFixed: false,
    hiddenTitle: false,
    width: 600,
    autoHeight: false
  },
  dialogAddToDesk: {
    show: false,
  },
  jackpot: computed(()=> piniaNocache.getJackPot),
  bottomConfig: {},
  showTipsRecharge: false,
  getUserRanks: [],
  dailyAttendanceRef: null,
});

const {
  lotteryNav,
  lotteryActive,
  banner,
  activity,
  gameCategory,
  recommend,
  popular,
  dialogConfig,
  dialogAddToDesk,
  jackpot,
  bottomConfig,
  showTipsRecharge,
  getUserRanks,
  dailyAttendanceRef,
} = toRefs(data);

homeApi.getByHallAdvertising({
  advertisingType: 1,
  dataType: piniaSystem.getIsH5 ? 4 : 3
}).then((response:any)=>{
  if(response.code === 200){
    banner.value = response.data.advertising || [];
    console.log("首页活动图1", response);
  }
});

homeApi.getByHallGame({ dataType: 3 }).then((response:any)=>{
  console.log("首页活动图2", response)
  if(response.code === 200){
    recommend.value = response.data.nowGame || [];
    popular.value = response.data.hotGame || [];
    piniaGamesList.setPopularGames(popular.value);
    piniaGamesList.setAllGames(response.data || []);
    changeLang();
  }
});

// 游戏点击
const gotoPlay = (game: any) => {
  if(piniaUserinfo.getHaslogged){
    // 已经登录
    if(game.gameId && game.gameId.trim()){
      const data = {
        playId: game.playId,
        imgPlay: game.imgPlay,
        gameName: game.gameName,
        fromPath: route.fullPath,
      }
      if(currentWallet.value.money > 0){
        router.replace({
          path: '/playbox',
          query: data
        });
      }else{
        showTipsRecharge.value = true;
      }
    }
  }else{
    // 未登录
    piniaNocache.openLogin();
  }
}

// 初始化排名
const getJackpotList = () => {
  homeApi.getJackpotList({}).then((response: any)=>{
    if(response.code === 200){
      getUserRanks.value = response.data.userBets || [];
      console.log("初始化排名==>", getUserRanks.value)
    }
  })
}

const queryJackpot = computed(()=>{
  const current = getUserRanks.value.find((im:any)=>im.currencyId === piniaUserinfo.getCurrentWallet.currencyId) || {
    currencyId: "",
    list: []
  };
  return current.list;
});

const getRanks = (rank: number) => {
  return queryJackpot.value[rank] || {};
}

// 分类点击
const categoryClick = (item: any) => {
  console.log(item.active)
  router.replace({
    path: `/${item.active}`
  });
}

// 抽奖转盘的navs
const queryLotterynavs = (nav:any) => {
  lotteryNav.value = nav;
}

// 抽奖转盘的navs切换
const handleLotteryType = (result:any) => {
  piniaNocache.setLotteryActive(result.nav.active || 0);
}

piniaHalllink.queryHalllinkConfig();

// banner点击
const bannerClick = (item: any) => {
  console.log(item, item.jumpType)
  if(item.jumpType == 1){
    // 内部弹框
    innerBannerDialog(item.gameId);
  } else if (Number(item.jumpType) == 2) {
    // 内部地址
    router.replace({
      path: `/${item.linkAddress}`
    });
  } else if (Number(item.jumpType) == 3) {
    // 外部地址
    window.open(item.linkAddress, "_blank");
  }
}

const innerBannerDialog = (id: string | number) => {
  if (piniaUserinfo.getHaslogged) {
    console.log(piniaHalllink.getActivityItem, id)
    switch (id) {
      case '10001'://每日任务
        if (piniaHalllink.getActivityItem.indexOf('80007') >= 0) {
          openDialogs('DailyTasks');
        } else if (piniaHalllink.getActivityItem.indexOf('80007') === -1) {
          global.message(t('menuActive.callBackErrorInfo'));
        }
        break;
      case "10002": //新转盘
        openDialogs('LotteryBox');
        break;
      case "10003": // 会员反水
        if (piniaHalllink.getActivityItem.indexOf('80006') >= 0) {
          openDialogs("Rebate");
        } else if (piniaHalllink.getActivityItem.indexOf('80006') === -1) {
          global.message(t('menuActive.callBackErrorInfo'));
        }
        break;
      case "10004": // 签到活动
        openDialogs("DailyAttendance");
        break;
      case "10005": // 推荐好友
        openDialogs("Friend");
        break;
      case "10006": // 救济金
        openDialogs("RescueFunds");
        break;
      case "10009": // 充值
        openDialogs("Wallet");
        break;
      case "10010": // 取款
        openDialogs("Wallet");
        break;
    }
  } else {
    // 打开登录
    piniaNocache.openLogin();
  }
}

// 活动点击
const activeClick = (item:any) => {
  if(!piniaUserinfo.getHaslogged){
    piniaNocache.openLogin();
    return;
  }
  openDialogs(item.active);
}

const openDialogs = (active: string) => {
  dialogConfig.value.hiddenTitle = false;
  if(active === "DailyTasks"){
    // 每日任务
    piniaNocache.openTask();
  }else if(active === 'Rebate'){
    // 返水
    dialogConfig.value.show = true;
    dialogConfig.value.width = 900;
    dialogConfig.value.title = t('menuActive.rebate');
    dialogConfig.value.hiddenTitle = piniaSystem.getIsH5 ? true : false;
    dialogConfig.value.type = piniaSystem.getIsH5 ? 'rebateH5' : 'rebatePc';
  }else if(active === 'Friend'){
    // 好友
    dialogConfig.value.show = true;
    dialogConfig.value.width = 900;
    dialogConfig.value.title = t('inviteFriend.inviteFriend');
    dialogConfig.value.hiddenTitle = piniaSystem.getIsH5 ? true : false;
    dialogConfig.value.type = piniaSystem.getIsH5 ? 'friendsH5' : 'friendsPc';
  }else if(active === 'RescueFunds'){
    // 救济金
    dialogConfig.value.show = true;
    dialogConfig.value.width = 900;
    dialogConfig.value.title = t('Transaction.text16');
    dialogConfig.value.hiddenTitle = piniaSystem.getIsH5 ? true : false;
    dialogConfig.value.type = piniaSystem.getIsH5 ? 'RescueFundsH5' : 'RescueFundsPc';
  }else if(active === 'DailyAttendance'){
    // 签到
    dialogConfig.value.show = true;
    dialogConfig.value.width = 900;
    dialogConfig.value.hiddenTitle = piniaSystem.getIsH5;
    dialogConfig.value.title = t('lang.el.pageHeader.title');
    dialogConfig.value.type = 'DailyAttendance';
  }else if(active === 'LotteryBox'){
    // 大转盘
    dialogConfig.value.show = true;
    dialogConfig.value.width = 900;
    dialogConfig.value.title = piniaSystem.getIsH5 ? t('lotteryRecord.gifts01') : ""; // 规则
    dialogConfig.value.hiddenTitle = piniaSystem.getIsH5 ? true : false;
    dialogConfig.value.type = piniaSystem.getIsH5 ? 'LotteryBoxh5' : 'LotteryBoxPc';
  }else if(active === 'Wallet'){
    piniaSystem.getIsH5 ? (
      router.replace({
        path: '/walletH5'
      })
    ) : (piniaNocache.openWallet());
  }
}


// 打开中将记录
const openLotteryRecord = () => {
  dialogConfig.value.width = 1000;
  dialogConfig.value.title = t('lotteryRecord.text31'); // 规则
  dialogConfig.value.type = piniaSystem.getIsH5 ? 'LotteryRecordH5' : 'LotteryRecordPc';
}

// 打开签到规则
const openSignRules = () => {
  dailyAttendanceRef.value.openRules()
}

// vip跳转
const gotoVip = (type?: number) => {
  router.replace({
    path: '/vip',
    query: {
      target: type
    }
  })
}

// 查询渠道信息
const getChannelId = () => {
  homeApi.getChannelId({}).then((response:any)=>{
    if(response.code === 200){
      console.log("渠道信息", response)
      piniaSystem.setChannel(response.data);
      initChatRobot(response.data.livechatId); // 在线客服
      console.log("initChatRobot", initChatRobot)
    }else if (response.code == 401 && response.data == 'code_1122'){
      let msg = JSON.parse(response.msg)
      initChatRobot(msg.livechatId);
    }
  });
}
getChannelId();

// 获取底部配置
const playHallBottomConfig = () => {
  homeApi.playHallBottomConfig({}).then((response:any)=>{
    console.log("获取底部信息", response)
    if(response.code === 200){
      bottomConfig.value = response.data || {listLan: []};
      changeLang();
    }
  });
}
playHallBottomConfig();

// 改变语言
const changeLang = () => {
  if(bottomConfig.value.listLan){
    const currentBottomConfig = bottomConfig.value.listLan.find((im:any)=>im.languageCode == piniaSystem.getLang.code);
    bottomConfig.value.webBottomId = currentBottomConfig.webBottomId;
    bottomConfig.value.webContact = currentBottomConfig.webContact;
    bottomConfig.value.webCopyright = currentBottomConfig.webCopyright;
    bottomConfig.value.webLegal = currentBottomConfig.webLegal;
  }
  recommend.value.forEach((element:any) => {
    const current = element.languageChildren.find((im:any)=>im.languageType == piniaSystem.getLang.code);
    current && (element.gameName = current.languageName);
  });
  popular.value.forEach((element:any) => {
    const current = element.languageChildren.find((im:any)=>im.languageType == piniaSystem.getLang.code);
    current && (element.gameName = current.languageName);
  });
  banner.value.forEach((element:any) => {
    const current = element.languageChildren.find((im:any)=>im.languageType == piniaSystem.getLang.code);
    current && (
      element.src = current.resource
    );
    console.log(element)
  });
}

// 打开邮件
const openEmail = (item:any) => {
  window.open(bottomConfig.value.urlAddress, "_blank")
}

const back = () => {
  dialogConfig.value.show = false;
}

// 动态加载js
loadVoLteResourceList([
  "https://2165bb27-a746-416b-adf1-d453a822ef86.snippet.antillephone.com/apg-seal.js"
]).then(()=>{
  // 牌照
  (window as any).apg_2165bb27_a746_416b_adf1_d453a822ef86.init();
}).catch((e)=>{
  console.log("拍照加载失败", e)
});

</script>

<style lang="scss" scoped>
@import url(./index.scss);
html.van-theme-light{
  .jackpot{
    .jackpot-wrapper{
      .jackpot-ranking{
        &.ranking2,
        &.ranking1{
          background-image: url(../../assets/images/home/jackpot/pcrank2-light.png) !important;
        }
      }
    }
  }
  .jackpot-h5{
    background-image: url(../../assets/images/home/jackpot/rankBg-light.png);
    ul{
      li{
        &.jackpot-rank1{
          background-image: url(../../assets/images/home/jackpot/rank2-light.png) !important;
        }
        &.jackpot-rank0{
          background-image: url(../../assets/images/home/jackpot/rank1-light.png) !important;
        }
        &.jackpot-rank2{
          background-image: url(../../assets/images/home/jackpot/rank3-light.png) !important;
        }
      }
    }
  }
}
</style>
